<template>
  <div v-loading="loading">
    <el-card :body-style="{padding:'10px'}" style="min-height: 680px;">
      <el-row :gutter="24">
        <el-col :span="21">
          <el-button type="info" @click="reset">新建</el-button>
          <el-button type="success" @click="saveEdit">保存</el-button>
        </el-col>
        <el-col :span="3">
          <el-button-group>
            <el-button type="primary" icon="el-icon-arrow-left" @click="toLast" />
            <el-button type="primary" icon="el-icon-arrow-right" @click="toNext" />
          </el-button-group>
        </el-col>
      </el-row>
      <el-card>
        <el-form ref="form" :model="form" :rules="rules">
          <el-descriptions border style="margin-bottom: 5px">
            <el-descriptions-item label="模板类型" label-style="width:8%" content-style="width:20%">
              {{ form.mold }}
            </el-descriptions-item>
            <el-descriptions-item label="模板名称" label-style="width:8%" content-style="width:20%">
              <el-form-item prop="name">
                <el-input v-model="form.name" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="版本" label-style="width:8%" content-style="width:23%">
              <el-form-item prop="version">
                <el-input v-model="form.version" />
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="备注" label-style="width:8%" content-style="width:23%">
              <el-form-item prop="remark">
                <el-input v-model="form.remark" />
              </el-form-item>
            </el-descriptions-item>
          </el-descriptions>
        </el-form>
        <editor v-model="form.content" api-key="12nm2w9l6vjqdm7f8xivkt8l3kfcsgw8nuydvlunm62rpnhd" :init="editConfig" />
      </el-card>
    </el-card>
  </div>
</template>

<script>import Editor from '@tinymce/tinymce-vue'
import { save } from '@/api/formwork'
import { get } from '@/api/formwork'
import { getNext } from '@/api/formwork'
import { getLast } from '@/api/formwork'
export default {
  components: {
    'editor': Editor
  },
  data() {
    return {
      loading: false,
      form: { },
      rules: {
        name: [
          { required: true, message: '名称不能为空' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        version: [
          { required: true, message: '版本号不能为空' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        mold: [
          { required: true, message: '单据类型不能为空' }
        ]
      },
      editConfig: {
        height: 630, // 富文本高度
        language_url: '/tinymce/zh_CN.js', // 中文包
        language: 'zh_CN', // 中文
        browser_spellcheck: true, // 拼写检查
        branding: false, // 去水印
        elementpath: true, // 禁用编辑器底部的状态栏
        statusbar: true, // 隐藏编辑器底部的状态栏
        paste_data_images: true, // 是否允许粘贴图像
        menubar: true, // 隐藏最上方menu
        fontsize_formats: '14px 16px 18px 20px 24px 26px 28px 30px 32px 36px', // 字体大小
        font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times', // 字体
        file_picker_types: 'image',
        images_upload_credentials: true,
        plugins: [
          'advlist autolink lists link image charmap print preview anchor',
          'searchreplace visualblocks code fullscreen',
          'insertdatetime media table paste code help wordcount'
        ],
        toolbar: 'fontselect fontsizeselect link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen',
        // 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数
        images_upload_handler: function(blobInfo, success, failure) {
          const formdata = new FormData()
          formdata.append('file', blobInfo.blob())
          // 上传图片接口，跟后端同事协调上传图片
          // http://hh.xxxx.cn/admin/upload为上传图片接口
        }
      }
    }
  },
  created() {
    if (this.$route.name === 'ipqcjyFormworkEdit') {
      this.form.mold = 'IPQC检验'
    } else if (this.$route.name === 'ipqcxjFormworkEdit') {
      this.form.mold = 'IPQC巡验'
    } else if (this.$route.name === 'produceFormworkEdit') {
      this.form.mold = '产品检验'
    } else if (this.$route.name === 'oldproduceFormworkEdit') {
      this.form.mold = '产品老化'
    } else if (this.$route.name === 'produceoutFormworkEdit') {
      this.form.mold = '产品出厂'
    } else if (this.$route.name === 'customerFormworkEdit') {
      this.form.mold = '顾客投诉'
    } else if (this.$route.name === 'pphandleFormworkEdit') {
      this.form.mold = 'PP每日维修'
    } else if (this.$route.name === 'ppfirstFormworkEdit') {
      this.form.mold = 'PP组装首检'
    }
    if (this.$route.query.id) {
      this.getFormwork(this.$route.query.id)
    }
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getFormwork(id) {
      this.loading = true
      get(id).then(res => {
        this.loading = false
        this.form = res.data.data
      })
    },
    reset() {
      this.$router.push({})
      this.form.id = null
      this.form.name = ''
      this.form.version = ''
      this.form.content = ''
      this.$forceUpdate()
    },
    toNext() {
      getNext(this.$route.query.id, this.form.mold).then(res => {
        this.$router.push({ query: { id: res.data.data }})
        if (this.$route.query.id) {
          this.getFormwork(this.$route.query.id)
        }
      })
    },
    toLast() {
      getLast(this.$route.query.id, this.form.mold).then(res => {
        this.$router.push({ query: { id: res.data.data }})
        if (this.$route.query.id) {
          this.getFormwork(this.$route.query.id)
        }
      })
    },
    saveEdit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          save(this.form).then(res => {
            this.loading = false
            this.$message.success(res.message)
            this.editVisible = false
            this.$router.push({ query: { id: res.data.data.id }})
            if (this.$route.query.id) {
              this.getFormwork(this.$route.query.id)
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

